import React,{useEffect} from "react";
import * as echarts from "echarts";

export default function Ring() {
    useEffect(() => {
        var chartDom = document.getElementById("mainss") as HTMLElement;
        var myChart = echarts.init(chartDom);
        var option;
      
        option = {
          tooltip: {
            trigger: "item",
          },
      
          legend: {
            left: "center",
            top: "bottom",
            data: ["老用户", "新用户"],
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "40",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: "老用户" },
                { value: 423, name: "新用户" },
              ],
            },
          ],
        };
      
        option && myChart.setOption(option);
   
    }, [])
    

  

  return (
    <div
      style={{
        width: "520px",
        height: "350px",
        float: "right",
        backgroundColor: "#fff",
        marginTop: "20px",
        borderRadius: "20px",
        padding: "30px",
      }}
    >
      <div style={{fontSize:"18px"}}>
今日新用户访问量占比</div>
      <div id="mainss" style={{ width: "300px", height: "300px",marginLeft:"80px" }}></div>
    </div>
  );
}
